<template>
	<view class="w-user-angent">
		<uni-forms ref="wflowForm" class="mx-1 mt-2 mb-3 shadow-2xl   rounded-lg font-mono p-2" :rules="rules" :modelValue="userAgent" label-position="top" label-width="200">
			<uni-forms-item name="timeRange" :required="true" :label="$t('webAuto.ProxyTimePeriod')">
				<uni-datetime-picker v-model="userAgent.timeRange" type="datetimerange" rangeSeparator="-" />
			</uni-forms-item>
			<uni-forms-item name="user" :required="true" :label="$t('webAuto.agent')">
				<user-picker class="w-user" v-model="userAgent.user" :formProps="{multiple: false, placeholder: $t('webAuto.SetUpAgent')}"
					position="right" />
			</uni-forms-item>
		</uni-forms>
		<button type="warn" plain size="mini" @click="cancelAgent" v-if="showCancel">
			<uni-icons type="refreshempty" color="#E64340" size="13"></uni-icons>
			{{$t('webAuto.CancelProxy')}}
		</button>
		<button type="primary" size="mini" class="w-button" @click="doSubmit">{{$t('calendar.submit')}}</button>
	</view>
</template>

<script setup>
	import UserPicker from '@/components/form/UserPicker.vue'
	import { getUserAgent, setUserAgent, cancelUserAgent } from '@/api/org.js'
	import { computed, onBeforeMount, ref } from "vue";
	import { useI18n } from 'vue-i18n';

	const { t } = useI18n()
	const userAgent = ref({
		timeRange: [],
		effective: false,
		user: []
	})
	
	const showCancel = ref(false)
	
	const wflowForm = ref()

	const userTemp = computed({
		get() {
			return userAgent.value.user ? [userAgent.value.user] : []
		},
		set(val) {
			userAgent.value.user = val[0]
		}
	})
	
	const rules = {
		timeRange: {
			rules: [{
				errorMessage:t('webAuto.ProxyTimePeriod'),
				required:true
			}]
		},
		user: {
			rules: [{
				errorMessage:t('webAuto.SetUpAgent'),
				required:true
			}]
		}
	}

	onBeforeMount(() => {
		getUserAgent().then(rsp => {
			if (rsp.data) {
				userAgent.value = {
					...rsp.data,
					user: rsp.data.user ? [rsp.data.user] : []
				}
				showCancel.value = true
			}
		})
	})
	
	function cancelAgent(){
		uni.showModal({
			title: t('webAuto.prompt'),
			content: t('webAuto.CancelProxySettings'),
			success: function(res) {
				if (res.confirm) {
					cancelUserAgent().then(res => {
						uni.showToast({
							icon: 'none',
							title: t('webAuto.CancelSuccessfully')
						})
						uni.navigateBack()
					})
				}
			}
		});
	}
	
	function doSubmit(){
		wflowForm.value.validate().then(res => {
			setUserAgent({
				timeRange: userAgent.value.timeRange, 
				user: userAgent.value.user[0]
			}).then(res => {
				uni.showToast({
					icon: 'none',
					title: t('webAuto.SuccessfullyAgent')
				})
				uni.navigateBack()
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: t('webAuto.SettingFailed')+ err.msg
				})
			})
		}).catch(err => {
			uni.showToast({
				icon: 'none',
				title: t('webAuto.completeSetup')
			})
		})
	}
</script>

<style lang="less" scoped>
	page {
		background-color: white !important;
	}

	.w-user-angent {
		padding: 32rpx 16rpx;

		.w-button {
			width: 100%;
		}
		
		button {
			margin-bottom: 32rpx;
		}
	}
</style>